<!DOCTYPE html>
<html>

<head>
    <title>leaflet-canvas-marker</title>
    <meta charset="utf-8" />
    <!-- 引入leafletapi -->
  <link rel="stylesheet" href="../lib/leaflet/leaflet.css" />
  <script src="../lib/leaflet/leaflet.js"></script>
    <!-- 引入leaflet-canvas-marker插件,已解决了缩放时飘的问题，增加了添加标签的功能 -->
  <script src="../lib/leaflet/plugins/leaflet.canvas-markers.js"></script>
    <style>
        body {
            margin: 0;
        }

        .map {
            position: absolute;
            height: 100%;
            right: 0;
            left: 0;
        }

        .menuBar {
            position: relative;
            text-align: center;
            top: 10px;
            margin: 0 50px;
            padding: 5px;
            border-radius: 3px;
            z-index: 999;
            color: #ffffff;
            background-color: rgba(0, 168, 0, 1);
        }
    </style>
</head>

<body>
    <div class="map" id="map"></div>
    <div class="menuBar">
        10万条数据，缩小地图感受一下
    </div>
    <script>

        var map = L.map('map', {
            center: [39.905963, 116.390813],
            zoom: 15,
            preferCanvas: true //使用canvas模式渲染矢量图形 
        });

        //添加底图
        var tiles = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png').addTo(map);

        //使用canvas模式渲染marker
        var ciLayer = L.canvasIconLayer({}).addTo(map);

        for (var i = 0; i < 100000; i++) {  
            var lat = 39.905963 + (Math.random() - Math.random()) * 3;
            var lng = 116.390813 + (Math.random() - Math.random()) * 3;

            //在这里设置图片和文字，调整位置，让文字显示在图片上
            var icon = L.icon({
                iconUrl: './img/bg.png',
                iconSize: [84, 34],
                iconAnchor: [40, 20],

                //添加文字
                text:i.toString(),
                textAnchor: [5, 0],         
                textFont:'14px bold',       //设置字体大小和样式
                textFillStyle:'#FFFFFF'     //设置字体颜色
            });

            var marker = L.marker([lat, lng], {
                    icon: icon
                })
                .bindPopup("I Am " + i); //绑定气泡窗口

            ciLayer.addLayer(marker);
        }
    </script>
</body>

</html>